<template>
	<view class="city">
		<!-- <view class="hot">
			<view class="title">
				热门城市
			</view>
			<view class="city_list">
				<view v-for="(item,index) in hot" @click="cho(item.id,item.city_name)" class="city_item">
					{{item.city_name}}
				</view>
			</view>
		</view> -->

		<u-index-list :indexList="indexList">
			<template v-for="(item, index) in all">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
				<!-- #endif -->
				<u-index-item :key="index">
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="city_list2">
						<view v-for="(items,indexs) in item.cityList" @click="cho(items.id,items.city_name)"
							class="city_item">
							{{items.city_name}}
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>

		<!-- 	<view v-for="(item,index) in all" class="all_city">
			<view class="title">
				{{item.number}}
			</view>
			<view class="city_list2">
				<view v-for="(items,indexs) in item.cityList" @click="cho(items.id,item.city_name)" class="city_item">
					{{items.city_name}}
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	// const indexList = () => {
	// 	const indexList = []
	// 	let ss = "热门".charCodeAt(0)
	// 	indexList.push(String.fromCharCode(ss))
	// 	const charCodeOfA = 'A'.charCodeAt(0)
	// 	for (let i = 0; i < 26; i++) {
	// 		indexList.push(String.fromCharCode(charCodeOfA + i))
	// 	}
	// 	console.log(indexList)
	// 	return indexList

	// }
	import {
		filmgetCityLists
	} from '@/api/oil'
	export default {
		data() {
			return {
				// indexList: indexList(),
				hot: [],
				all: [],
				indexList: [],
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist() {
				filmgetCityLists().then(res => {
					if (res.success == 1) {
						// console.log(res.data)
						// this.hot = res.data.hotCityList;
						// this.all = res.data.filmCityInfoList;
						this.all = res.data;
						let add = res.data;
						let list = [];
						let str
						add.forEach((item, index) => {
							if (item.number == '热门') {
								str = 'Hot'
							} else {
								str = item.number
							}
							list.push(str)
						})

						this.indexList = list
						console.log(list)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			cho(id, name) {
				// let ids = encodeURIComponent(id)
				// let names = encodeURIComponent(name)
				// uni.navigateTo({
				// 	url: `./moive?id=${ids}&city=${names}`
				// })
				uni.navigateTo({
					url: `./moive?id=${id}&city=${name}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-index-list__letter__item {
		width: 70rpx !important;
	}

	.city {
		// width: 100%;
		// padding: 30rpx 0;
	}

	.title {
		width: 100%;
		background: #f5f5f5;
		padding: 10rpx;
		font-size: 32rpx;
	}

	.all_city {
		// margin-bottom: 20rpx;

		.all_title {
			width: 50rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			color: #FFFFFF;
			background: #f16138;
			border-radius: 50%;
		}
	}

	.city_list {
		// width: 100%;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.city_item {
			width: 18%;
			border: 2rpx solid rgba(0, 0, 0, 0.5);
			color: rgba(0, 0, 0, 0.7);
			padding: 8rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.city_list2 {
		.city_item {
			font-size: 28rpx;
			padding: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
		}
	}
</style>
